<template>
  <div class="app-container">
    <div class="top">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="110px">
        <div class="input-row">
          <el-form-item label="运单编号 :" prop="id">
            <el-input v-model="ruleForm.id" placeholder="请输入运单编号" size="medium" />
          </el-form-item>
          <el-form-item label="订单编号 :" prop="orderId">
            <el-input v-model="ruleForm.orderId" placeholder="请输入订单编号" size="medium" />
          </el-form-item>
          <el-form-item label="调度状态 :" prop="schedulingStatus">
            <el-select v-model="ruleForm.schedulingStatus" placeholder="请选择" size="medium">
              <el-option label="待调度" value="1" />
              <el-option label="未匹配线路" value="2" />
              <el-option label="已调度" value="3" />
            </el-select>
          </el-form-item>
        </div>
        <div class="input-row">
          <el-form-item label="起始地机构 :" prop="startAgencyName">

            <el-select ref="selectTree" v-model="selectValue" class="main-select-tree select">
              <el-option v-for="item in treeData" :key="item.id" :label="item.name" :value="value" style="display: none;" />
              <el-tree
                ref="selecteltree"
                class="main-select-el-tree"
                :data="treeData"
                node-key="id"
                highlight-current
                :props="{label:'name',children:'children'}"
                :expand-on-click-node="false"
                @node-click="hasValue"
              />
            </el-select>

          </el-form-item>
          <el-form-item label="目的地机构 :" prop="endAgencyName">

            <el-select ref="selectTree" v-model="destination" class="main-select-tree select">
              <el-option v-for="item in treeData" :key="item.id" :label="item.name" :value="value1" style="display: none;" />
              <el-tree
                ref="destination"
                class="main-select-el-tree"
                :data="treeData"
                node-key="id"
                highlight-current
                :props="{label:'name',children:'children'}"
                :expand-on-click-node="false"
                @node-click="hasValue1"
              />
            </el-select>

          </el-form-item>
          <el-form-item label="当前所在机构 :" prop="currentAgencyName">

            <el-select ref="selectTree" v-model="destination1" class="main-select-tree select">
              <el-option v-for="item in treeData" :key="item.id" :label="item.name" :value="value2" style="display: none;" />
              <el-tree
                ref="destination1"
                class="main-select-el-tree"
                :data="treeData"
                node-key="id"
                highlight-current
                :props="{label:'name',children:'children'}"
                :expand-on-click-node="false"
                @node-click="hasValue2"
              />
            </el-select>

          </el-form-item>
        </div>
        <el-form-item>
          <el-button v-model="ruleForm.keyword" type="primary" @click="seatch">搜索</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="container">
      <div>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="1">全部 {{ tableData.length }}</el-menu-item>
          <el-menu-item index="2">新建</el-menu-item>
          <el-menu-item index="3">已包装</el-menu-item>
          <el-menu-item index="4">运输中</el-menu-item>
          <el-menu-item index="5">到达终端网点
          </el-menu-item>
          <el-menu-item index="6">拒收</el-menu-item>
        </el-menu>

        <div v-show="activeIndex === '1'">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
          >
            <el-table-column
              fixed
              :index="indexMethod"
              prop="status"
              label="序号"
              width="120"
              type="index"
            />
            <el-table-column
              prop="id"
              label="运单管理"
              width="120"
            />
            <el-table-column
              prop="orderId"
              label="订单编号"
              width="120"
            />
            <el-table-column
              prop="status"
              label="运单状态"
              width="120"
            >
              <template v-slot="{ row }">
                <span v-if="row.status === 1">新建</span>
                <span v-else-if="row.status === 2">已装车</span>
                <span v-else-if="row.status === 3">到达</span>
                <span v-else-if="row.status === 4">到达终端网点</span>
                <span v-else>无</span>
              </template>
            </el-table-column>

            <el-table-column
              prop="schedulingStatus"
              label="调整状态"
              width="120"
            >
              <template v-slot="{ row }">
                <span v-if="row.schedulingStatus === 1">待调度</span>
                <span v-else-if="row.schedulingStatus === 2">未匹配线路</span>
                <span v-else-if="row.schedulingStatus === 3">已调度</span>
                <span v-else>无</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="startAgencyName"
              label="起试营业部"
              width="120"
            />
            <el-table-column
              prop="endAgencyName"
              label="终点营业部"
              width="120"
            />
            <el-table-column
              prop="currentAgencyName"
              label="当前所在机构"
              width="120"
            />
            <el-table-column
              prop="nextAgencyName"
              label="下一个机构"
              width="120"
            />
            <el-table-column
              prop="totalVolume"
              label="货品总体积(立方米)"
              width="120"
            />
            <el-table-column
              prop="totalWeight"
              label="货品总重量(千克)"
              width="120"
            />
            <el-table-column
              prop="created"
              label="创建时间"
              width="120"
            />
            <el-table-column
              prop="updated"
              label="更新时间"
              width="120"
            />
            <el-table-column
              fixed="right"
              label="操作"
              width="120"
            >
              <template v-slot="{row}">
                <el-button type="text" size="medium" @click="$router.push(`/businessManagement/way-detail/${row.id}`)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-show="activeIndex === '2'">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
          >
            <el-table-column
              fixed
              :index="indexMethod"
              prop="status"
              label="序号"
              width="120"
              type="index"
            />
            <el-table-column
              prop="id"
              label="运单管理"
              width="120"
            />
            <el-table-column
              prop="orderId"
              label="订单编号"
              width="120"
            />
            <el-table-column
              prop="status"
              label="运单状态"
              width="120"
            >
              <template v-slot="{ row }">
                <span v-if="row.status === 1">新建</span>
                <span v-else-if="row.status === 2">已装车</span>
                <span v-else-if="row.status === 3">到达</span>
                <span v-else-if="row.status === 4">到达终端网点</span>
                <span v-else>无</span>
              </template>
            </el-table-column>

            <el-table-column
              prop="schedulingStatus"
              label="调整状态"
              width="120"
            >
              <template v-slot="{ row }">
                <span v-if="row.schedulingStatus === 1">待调度</span>
                <span v-else-if="row.schedulingStatus === 2">未匹配线路</span>
                <span v-else-if="row.schedulingStatus === 3">已调度</span>
                <span v-else>无</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="startAgencyName"
              label="起试营业部"
              width="120"
            />
            <el-table-column
              prop="endAgencyName"
              label="终点营业部"
              width="120"
            />
            <el-table-column
              prop="currentAgencyName"
              label="当前所在机构"
              width="120"
            />
            <el-table-column
              prop="nextAgencyName"
              label="下一个机构"
              width="120"
            />
            <el-table-column
              prop="totalVolume"
              label="货品总体积(立方米)"
              width="120"
            />
            <el-table-column
              prop="totalWeight"
              label="货品总重量(千克)"
              width="120"
            />
            <el-table-column
              prop="created"
              label="创建时间"
              width="120"
            />
            <el-table-column
              prop="updated"
              label="更新时间"
              width="120"
            />
            <el-table-column
              fixed="right"
              label="操作"
              width="120"
            >
              <template v-slot="{row}">
                <el-button type="text" size="medium" @click="$router.push(`/businessManagement/way-detail/${row.id}`)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-show="activeIndex === '3'">
          <el-table
            border
            style="width: 100%"
          >
            <el-table-column
              fixed
              label="序号"
              width="120"
            />
            <el-table-column
              label="运单管理"
              width="120"
            />
            <el-table-column
              label="订单编号"
              width="120"
            />
            <el-table-column
              label="运单状态"
              width="120"
            />

            <el-table-column
              label="调整状态"
              width="120"
            />
            <el-table-column
              label="起试营业部"
              width="120"
            />
            <el-table-column
              label="终点营业部"
              width="120"
            />
            <el-table-column
              label="当前所在机构"
              width="120"
            />
            <el-table-column
              label="下一个机构"
              width="120"
            />
            <el-table-column
              label="货品总体积(立方米)"
              width="120"
            />
            <el-table-column
              label="货品总重量(千克)"
              width="120"
            />
            <el-table-column
              label="创建时间"
              width="120"
            />
            <el-table-column
              label="更新时间"
              width="120"
            />
            <el-table-column
              fixed="right"
              label="操作"
              width="120"
            >
              <template v-slot="{row}">
                <el-button type="text" size="medium" @click="$router.push(`/businessManagement/way-detail/${row.id}`)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-show="activeIndex === '4'">
          <el-table
            border
            style="width: 100%"
          >
            <el-table-column
              fixed
              label="序号"
              width="120"
            />
            <el-table-column
              label="运单管理"
              width="120"
            />
            <el-table-column
              label="订单编号"
              width="120"
            />
            <el-table-column
              label="运单状态"
              width="120"
            />

            <el-table-column
              label="调整状态"
              width="120"
            />
            <el-table-column
              label="起试营业部"
              width="120"
            />
            <el-table-column
              label="终点营业部"
              width="120"
            />
            <el-table-column
              label="当前所在机构"
              width="120"
            />
            <el-table-column
              label="下一个机构"
              width="120"
            />
            <el-table-column
              label="货品总体积(立方米)"
              width="120"
            />
            <el-table-column
              label="货品总重量(千克)"
              width="120"
            />
            <el-table-column
              label="创建时间"
              width="120"
            />
            <el-table-column
              label="更新时间"
              width="120"
            />
            <el-table-column
              fixed="right"
              label="操作"
              width="120"
            >
              <template v-slot="{row}">
                <el-button type="text" size="medium" @click="$router.push(`/businessManagement/way-detail/${row.id}`)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-show="activeIndex === '5'">
          <el-table
            border
            style="width: 100%"
          >
            <el-table-column
              fixed
              label="序号"
              width="120"
            />
            <el-table-column
              label="运单管理"
              width="120"
            />
            <el-table-column
              label="订单编号"
              width="120"
            />
            <el-table-column
              label="运单状态"
              width="120"
            />

            <el-table-column
              label="调整状态"
              width="120"
            />
            <el-table-column
              label="起试营业部"
              width="120"
            />
            <el-table-column
              label="终点营业部"
              width="120"
            />
            <el-table-column
              label="当前所在机构"
              width="120"
            />
            <el-table-column
              label="下一个机构"
              width="120"
            />
            <el-table-column
              label="货品总体积(立方米)"
              width="120"
            />
            <el-table-column
              label="货品总重量(千克)"
              width="120"
            />
            <el-table-column
              label="创建时间"
              width="120"
            />
            <el-table-column
              label="更新时间"
              width="120"
            />
            <el-table-column
              fixed="right"
              label="操作"
              width="120"
            >
              <template v-slot="{row}">
                <el-button type="text" size="medium" @click="$router.push(`/businessManagement/way-detail/${row.id}`)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-show="activeIndex === '6'">
          <el-table
            border
            style="width: 100%"
          >
            <el-table-column
              fixed
              label="序号"
              width="120"
            />
            <el-table-column
              label="运单管理"
              width="120"
            />
            <el-table-column
              label="订单编号"
              width="120"
            />
            <el-table-column
              label="运单状态"
              width="120"
            />

            <el-table-column
              label="调整状态"
              width="120"
            />
            <el-table-column
              label="起试营业部"
              width="120"
            />
            <el-table-column
              label="终点营业部"
              width="120"
            />
            <el-table-column
              label="当前所在机构"
              width="120"
            />
            <el-table-column
              label="下一个机构"
              width="120"
            />
            <el-table-column
              label="货品总体积(立方米)"
              width="120"
            />
            <el-table-column
              label="货品总重量(千克)"
              width="120"
            />
            <el-table-column
              label="创建时间"
              width="120"
            />
            <el-table-column
              label="更新时间"
              width="120"
            />
            <el-table-column
              fixed="right"
              label="操作"
              width="120"
            >
              <template v-slot="{row}">
                <el-button type="text" size="medium" @click="$router.push(`/businessManagement/way-detail/${row.id}`)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <div class="block">
      <el-pagination
        :current-page="1"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageprams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      />
    </div>
  </div>
</template>
<script>
import { getOrder } from '@/api/businessManagement'
import { getManageTree } from '@/api/manager'
export default {
  data() {
    return {
      value: 1,
      value1: 1,
      value2: 1,
      counts: 0,
      tableData: [],
      treeData: [],
      destination: '',
      destination1: '',
      selectValue: '',
      ruleForm: {
        keyword: '',
        schedulingStatus: '',
        currentAgencyId: '',
        endAgencyId: '',
        id: '',
        orderId: '',
        startAgencyId: '',
        status: ''
      },
      activeIndex: '1',
      rules: {},
      pageprams: {

        pageSize: 6,
        page: 1,
        pages: 1
      }
    }
  },
  async created() {
    this.getOrder(this.pageprams)

    const res = await getManageTree()
    this.treeData = JSON.parse(res)
  },
  methods: {
    async getOrder() {
      const res1 = await getOrder(this.pageprams)
      this.tableData = res1.items
    },
    seatch() {
      this.getOrder()
      console.log(this.ruleForm.keyword)
    },
    handleSelect(index) {
      this.activeIndex = index
    },
    indexMethod(index) {
      return index + this.pageprams.pageSize * (this.pageprams.page - 1) + 1
    },
    hasValue(row) {
      // this.courier.agentId = row.id
      // console.log(row.name)
      this.selectValue = row.name
      this.$refs.selectTree.blur()
    },
    hasValue1(row) {
      // this.courier.agentId = row.id
      // console.log(row.name)
      this.destination = row.name
      this.$refs.selectTree.blur()
    },
    hasValue2(row) {
      // this.courier.agentId = row.id
      // console.log(row.name)
      this.destination1 = row.name
      this.$refs.selectTree.blur()
    },
    reset() {
      this.destination = ''
      this.destination1 = ''
      this.selectValue = ''
      this.ruleForm.id = ''
      this.ruleForm.orderId = ''
      this.ruleForm.schedulingStatus = ''
      this.getOrder()
    }
  }
}
</script>
<style scoped lang="scss">
.app-container {
 background-color: #f4f6f8;
}
.top {
  background-color: #ffffff;
  padding: 10px;
}
.input-row {
    display: flex;
    justify-content:space-evenly ;
}
.container {
  margin-top: 20px;
  background-color: #ffffff;
   padding: 10px;
}
.block {
  display: flex;
      justify-content:center ;
}
</style>
